<template>
  <div class="peoplenum">
    <div id="main" style="width: 500px;padding-top:50px;height: 400px;float: left"></div>

    <div class="rightvideo">
      <videoPlayer class="video-player vjs-custom-skin"
                       ref="videoPlayer"
                       :playsinline="true"
                       :options="playerOptions"
                       @play="onPlayerPlay($event)"
                       @pause="onPlayerPause($event)">
      </videoPlayer>
    </div>
    <div style="clear: both"></div>
  </div>
</template>

<script>
const echarts = require('echarts')
import {videoPlayer} from 'vue-video-player';
export default {
  name: "PeopleNum",
  data() {
    return {
      charts: '',
      seven: [],
      sevenday: [],
      sevendaynum: [],
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        aspectRatio: '4:3', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        sources: [{ // 播放资源和资源格式
          type: "video/mp4",
          src: "http://r0smp2e4j.hd-bkt.clouddn.com/swim.mp4" //你的视频地址（必填）
        }],
      }
    }
  },
  methods: {
    onPlayerPlay() {
      // 当视频播放时，执行的方法
      console.log('视频开始播放')
    },
    onPlayerPause() {
      // 当视频暂停播放时，执行的方法
      console.log('视频暂停，可以打开广告了')
    },
    get_sevendaynum() {
      this.$http.get(`${this.$settings.base_url}home/swimpeople/`).then(response => {
        this.seven = response.data;
        for (let i = 0; i < 7; i++) {
          this.sevenday.unshift(this.seven[i]['date'].slice(5, 10));
          this.sevendaynum.unshift(this.seven[i]['num'])
        }
        console.log(this.sevenday)
        console.log(this.sevendaynum)
      }).catch(() => {
        this.$message({
          message: "获取数据错误",
        })
      }).then(()=>{
        this.drawLine('main')
      })

    },
    drawLine(id) {
      this.charts = echarts.init(document.getElementById(id))
      this.charts.setOption({
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['近七日进馆人数']
        },
        // grid: {
        //   left: '3%',
        //   right: '4%',
        //   bottom: '3%',
        //   containLabel: true
        // },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [
            this.sevenday[0],
            this.sevenday[1],
            this.sevenday[2],
            this.sevenday[3],
            this.sevenday[4],
            this.sevenday[5],
            this.sevenday[6],
          ]
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          name: '近七日进馆人数',
          type: 'line',
          stack: '总量',
          data: [
              this.sevendaynum[0],
              this.sevendaynum[1],
              this.sevendaynum[2],
              this.sevendaynum[3],
              this.sevendaynum[4],
              this.sevendaynum[5],
              this.sevendaynum[6]
          ]
        }]
      })
    }
  },
  components: {
    videoPlayer, // 注册组件
  },
  created() {
    this.get_sevendaynum()
  },
  mounted() {

  },

}
</script>

<style scoped>
* {
  width: 1200px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.rightvideo{
  height: 400px;
  width: 533px;
  float: right;
}
.video-player{
  width: 533px;
}

</style>